<template>
  <el-table-column
    prop="dept_name"
    label="组织名称"
    min-width="100"
    
  >
    <template #default="{ row }">
      <!-- 如果是公司，显示不同的样式 -->
      <template v-if="row.pid === -1">
        <span 
          :class="{
            'selected': selectedRow?.id === row.id && selectable,
            'hoverable': hoverable
          }"
          @click="handleRowClick(row)"
        >
          {{ row.dept_name }}
        </span>
      </template>
      <template v-else>
        <span 
          :class="{
            'selected': selectedRow?.id === row.id && selectable,
            'hoverable': hoverable
          }"
          @click="handleRowClick(row)"
        >
          {{ row.dept_name }}
        </span>
      </template>
    </template>
  </el-table-column>
</template>

<script setup lang="ts">
import type { OrganizationNameColumnProps } from '@/types/components'
import { ref, watch } from 'vue'
import { useDepartmentStore } from '@/stores/department'
import { storeToRefs } from 'pinia'
import type { DepartmentItem } from '@/api/types/department'

const departmentStore = useDepartmentStore()
const { departmentList } = storeToRefs(departmentStore)

const props = withDefaults(defineProps<{
  selectable?: boolean
  hoverable?: boolean
  widths?:String
}>(), {
  selectable: false,
  hoverable: false,
  widths:200
})

const emit = defineEmits<{
  (e: 'select', row: DepartmentItem): void
}>()

const selectedRow = ref<DepartmentItem | null>(null)

const handleRowClick = (row: DepartmentItem) => {  
  if (!props.selectable) return
  selectedRow.value = row
  emit('select', row)
}

watch(departmentList, (newList: DepartmentItem[]) => {
  if (props.selectable && newList.length > 0 && !selectedRow.value) {
    handleRowClick(newList[0])
  }
}, { immediate: true })
</script>

<style lang="scss" scoped>
span {
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
  position: relative;
  border-left: 2px solid transparent;  // 添加透明边框，防止选中时的抖动
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    border-radius: 4px;
    transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
  }
}

.hoverable {
  &:hover {
    transform: translateX(2px);
    
    &::before {
      background-color: #f0f2f5;
    }
  }
}

.selected {
  color: #1890ff;
  border-left: 2px solid #1890ff;
  font-weight: 500;
  
  &::before {
    background-color: #e6f7ff;
    box-shadow: 0 2px 6px rgba(24, 144, 255, 0.1);
  }
}
</style> 